﻿@page "/pages/others/account-settings"
@inherits AdminCompontentBase

<MRow>
    <MCol Md=3 Sm=12>
        <MList>
            <MListItemGroup Mandatory @bind-Value="_current" ActiveClass="deep-purple white--text elevation-6">
                <MListItem>
                    <MListItemIcon><MIcon>far fa-user</MIcon></MListItemIcon>
                    <MListItemContent>
                        <MListItemTitle>General</MListItemTitle>
                    </MListItemContent>
                </MListItem>
                <MListItem>
                    <MListItemIcon><MIcon>fas fa-lock</MIcon></MListItemIcon>
                    <MListItemContent>
                        <MListItemTitle>Change Password</MListItemTitle>
                    </MListItemContent>
                </MListItem>
                <MListItem>
                    <MListItemIcon><MIcon>fas fa-info-circle</MIcon></MListItemIcon>
                    <MListItemContent>
                        <MListItemTitle>Information</MListItemTitle>
                    </MListItemContent>
                </MListItem>
                <MListItem>
                    <MListItemIcon><MIcon>fas fa-share-alt-square</MIcon></MListItemIcon>
                    <MListItemContent>
                        <MListItemTitle>Social</MListItemTitle>
                    </MListItemContent>
                </MListItem>
                <MListItem>
                    <MListItemIcon><MIcon>far fa-bell</MIcon></MListItemIcon>
                    <MListItemContent>
                        <MListItemTitle>Notifications</MListItemTitle>
                    </MListItemContent>
                </MListItem>
            </MListItemGroup>
        </MList>
    </MCol>
    <MCol Md=9 Sm=12>
        <MCard Style="@(_current == 0 ?"":"display:none")">
            <MCardTitle>
                <MList Style="width:100%">
                    <div class="d-flex">
                        <MAvatar Size=90 Tile>
                            <MImage Src="/img/avatar/7.svg"></MImage>
                        </MAvatar>
                        <div Class="ml-6 pt-3 max-height">
                            <MButton Small Color="deep-purple white--text font-weight-black"> Upload </MButton>
                            <MButton Small Outlined Class="ml-2 grey--text font-weight-black"> Reset </MButton>
                            <p class="mt-2 grey--text text-subtitle-1">Allowed JPG, GIF or PNG. Max size of 800kB</p>
                        </div>
                    </div>
                    <MRow Class="mt-2">
                        <MCol Md=6 Sm=12>
                            <MTextField @bind-Value="_account.UserName" Label="Username" Placeholder="Username" Outlined TValue="string" />
                        </MCol>
                        <MCol Md=6 Sm=12>
                            <MTextField @bind-Value="_account.Name" Label="Name" Placeholder="Name" Outlined TValue="string" />
                        </MCol>
                    </MRow>
                    <MRow Class="mt-n6">
                        <MCol Md=6 Sm=12>
                            <MTextField @bind-Value="_account.Email" Label="E-mail" Placeholder="E-mai" Outlined TValue="string" />
                        </MCol>
                        <MCol Md=6 Sm=12>
                            <MTextField @bind-Value="_account.Company" Label="Company" Placeholder="Company" Outlined TValue="string" />
                        </MCol>
                    </MRow>
                    <MAlert Color="orange lighten-5" Class="orange--text">
                        Your email is not confirmed. Please check your inbox.
                        <MDivider Class="orange-border"></MDivider>
                        Resend confirmation
                    </MAlert>
                    <MItem>
                        <MButton Color="deep-purple white--text font-weight-black"> Save changes </MButton>
                        <MButton Outlined Class="ml-2 grey--text font-weight-black" OnClick="ResetAccount"> Reset </MButton>
                    </MItem>
                </MList>
            </MCardTitle>
        </MCard>
        <MCard Style="@(_current == 1 ?"":"display:none")">
            <MCardText>
                <MRow>
                    <MCol Md=6 Sm=12>
                        <MTextField @bind-Value="_oldPassword" Label="Old Password" Outlined Placeholder="Old Password" TValue="string" Type="@(_show1 ? "text" : "password")" AppendIcon="@(_show1 ? "mdi-eye" : "mdi-eye-off")" OnAppendClick="() => _show1 = !_show1"></MTextField>
                    </MCol>
                    <MCol Md=6 Sm=0></MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MTextField @bind-Value="_newPassword" Label="New Password" Outlined Placeholder="New Password" TValue="string" Type="@(_show2 ? "text" : "password")" AppendIcon="@(_show2 ? "mdi-eye" : "mdi-eye-off")" OnAppendClick="() => _show2 = !_show2"></MTextField>
                    </MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MTextField @bind-Value="_retypeNewPassword" Label="Retype New Password" Outlined Placeholder="Retype New Password" TValue="string" Type="@(_show3 ? "text" : "password")" AppendIcon="@(_show3 ? "mdi-eye" : "mdi-eye-off")" OnAppendClick="() => _show3 = !_show3"></MTextField>
                    </MCol>
                </MRow>
                <MItem>
                    <MButton Color="deep-purple white--text font-weight-black"> Save changes </MButton>
                    <MButton Outlined Class="ml-2 grey--text font-weight-black" OnClick="ResetPassoword"> Reset </MButton>
                </MItem>
            </MCardText>
        </MCard>
        <MCard Style="@(_current == 2 ?"":"display:none")">
            <MCardText>
                <MRow>
                    <MCol Sm=12>
                        <MTextarea @bind-Value="_information.Bio" Label="Bio" Outlined Placeholder="Your bio data here..."></MTextarea>
                    </MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MMenu CloseOnContentClick="true" NudgeRight="40" Transition="scale-transition" OffsetY MinWidth="@("auto")">
                            <ActivatorContent>
                                <MTextField @bind-Value="_information.BirthDate" Label="Birth date" Outlined Placeholder="Birth date" Readonly @attributes="context.Attrs"></MTextField>
                            </ActivatorContent>
                            <ChildContent>
                                <MDatePicker @bind-Value="_information.BirthDate"></MDatePicker>
                            </ChildContent>
                        </MMenu>
                    </MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MSelect Items=_items ItemValue="u => u.Id" Label="Country" ItemText="u => u.Name" Outlined @bind-Value="_information.Country"></MSelect>
                    </MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MTextField @bind-Value="_information.Website" Label="Website" Placeholder="Website address" Outlined TValue="string" />
                    </MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MTextField @bind-Value="_information.Phone" Label="Phone" Placeholder="Phone Number" Outlined TValue="long" />
                    </MCol>
                </MRow>
                <MItem>
                    <MButton Color="deep-purple white--text font-weight-black"> Save changes </MButton>
                    <MButton Outlined Class="ml-2 grey--text font-weight-black" OnClick="ResetInformation"> Reset </MButton>
                </MItem>
            </MCardText>
        </MCard>
        <MCard Style="@(_current == 3 ?"":"display:none")">
            <MCardTitle>
                <MIcon>fas fa-share-alt-square</MIcon>
                <span class="ml-3">Social Links</span>
            </MCardTitle>
            <MCardText>
                <MRow>
                    <MCol Md=6 Sm=12>
                        <MTextField @bind-Value="_social.Twitter" Label="Twitter" Placeholder="Add Link" Outlined TValue="string" />
                    </MCol>
                    <MCol Md=6 Sm=12>
                        <MTextField @bind-Value="_social.Facebook" Label="Facebook" Placeholder="Add Link" Outlined TValue="string" />
                    </MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MTextField @bind-Value="_social.Google" Label="Google+" Placeholder="Add Link" Outlined TValue="string" />
                    </MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MTextField @bind-Value="_social.LinkedIn" Label="LinkedIn" Placeholder="Add Link" Outlined TValue="string" />
                    </MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MTextField @bind-Value="_social.Instagram" Label="Instagram" Placeholder="Add Link" Outlined TValue="string" />
                    </MCol>
                    <MCol Md=6 Sm=12 Class="mt-n6">
                        <MTextField @bind-Value="_social.Quora" Label="Quora" Placeholder="Add Link" Outlined TValue="string" />
                    </MCol>
                </MRow>
                <MDivider></MDivider>
            </MCardText>
            <MCardTitle>
                <MIcon>far fa-user</MIcon>
                <span class="ml-3">Profile Connections</span>
            </MCardTitle>
            <MCardText>
                <MRow>
                    <MCol Md=3 Sm=6 Class="text-center">
                        <div class="text-subtitle-1">Your Twitter</div>
                        <MAvatar Class="mt-2 mb-2">
                            <MImage Src="/img/avatar/8.svg"></MImage>
                        </MAvatar>
                        <div class="text-subtitle-1">@@johndoe</div>
                        <MButton Icon Color="deep-purple">Disconnect</MButton>
                    </MCol>
                    <MCol Md=3 Sm=6 Class="text-center">
                        <div class="text-subtitle-1">Your Facebook</div>
                        <MButton Color="deep-purple light-5" Outlined Class="white--text mt-5">Connect</MButton>
                    </MCol>
                    <MCol Md=3 Sm=6 Class="text-center">
                        <div class="text-subtitle-1">Your Google</div>
                        <MAvatar Class="mt-2 mb-2">
                            <MImage Src="/img/avatar/1.svg"></MImage>
                        </MAvatar>
                        <div class="text-subtitle-1">@@luraweber</div>
                        <MButton Icon Color="deep-purple">Disconnect</MButton>
                    </MCol>
                    <MCol Md=3 Sm=6 Class="text-center">
                        <div class="text-subtitle-1">Your GitHub</div>
                        <MButton Color="deep-purple light-5" Outlined Class="white--text mt-5">Connect</MButton>
                    </MCol>
                </MRow>
                <div Class="mt-5">
                    <MButton Color="deep-purple white--text font-weight-black"> Save changes </MButton>
                    <MButton Outlined Class="ml-2 grey--text font-weight-black" OnClick="ResetSocial"> Cancel </MButton>
                </div>
            </MCardText>
        </MCard>
        <MCard Style="@(_current == 4 ?"":"display:none")">
            <MCardText>
                <p class="grey--text">ACTIVITY</p>
                <MSwitch TValue="bool" Label="Email me when someone comments on my article"></MSwitch>
                <MSwitch TValue="bool" Label="Email me when someone answers on my form"></MSwitch>
                <MSwitch TValue="bool" Label="Email me hen someone follows me"></MSwitch>
                <p class="grey--text">APPLICATION</p>
                <MSwitch TValue="bool" Label="News and announcements"></MSwitch>
                <MSwitch TValue="bool" Label="Weekly product updates"></MSwitch>
                <MSwitch TValue="bool" Label="Weekly blog digest"></MSwitch>
                <MItem>
                    <MButton Color="deep-purple white--text font-weight-black"> Save changes </MButton>
                    <MButton Outlined Class="ml-2 grey--text font-weight-black"> Cancel </MButton>
                </MItem>
            </MCardText>
        </MCard>
    </MCol>
</MRow>

@code {
    private StringNumber _current = 0;
    private AccountDto _account = AccountSettingService.GetAccount();
    private bool _show1;
    private bool _show2;
    private bool _show3;
    private List<CountryDto> _items = AccountSettingService.GetCountryList();
    private InformationDto _information = AccountSettingService.GetInformation();
    private SocialDto _social = AccountSettingService.GetSocial();

    private string _oldPassword = "";
    private string _newPassword = "";
    private string _retypeNewPassword = "";

    private void ResetPassoword()
    {
        _oldPassword = "";
        _newPassword = "";
        _retypeNewPassword = "";
    }

    private void ResetAccount()
    {
        _account = AccountSettingService.GetAccount();
    }

    private void ResetInformation()
    {
        _information = AccountSettingService.GetInformation();
    }

    private void ResetSocial()
    {
        _social = AccountSettingService.GetSocial();
    }
}
